<link rel='import' href='../../bower/paper-icon-button/paper-icon-button.html'>
<link rel='import' href='button.html'>

<!--
uproxy-bubble will appear immediately below the previous element in the DOM.

It will have both an X button in the top right as well as a done button in the
bottom.  If either of these buttons are clicked, the element will be removed
from the DOM and the "closed" event will be fired.  Listen to it by adding
an "on-closed" attribute to the uproxy-bubble element.

To change the color of the box:
uproxy-bubble::shadow #box {
  background: red;
}
uproxy-bubble::shadow #arrow {
  border-bottom-color: red;
}
uproxy-bubble::shadow #done {
  background: (some off-shade);
}
-->

<polymer-element name='uproxy-bubble' attributes='active noclear' hidden>
  <template>
    <style>
    :host {
      position: fixed;

      min-width: 300px;
      max-width: 400px;
      min-height: 100px;

      margin: 15px 0 0 !important;

      color: white;
      opacity: .8;
    }
    #container {
      position: relative;
    }
    #arrow {
      position: absolute;
      top: -20px;

      width: 0;
      height: 0;

      border: 10px solid transparent;
      border-bottom-color: black;
    }
    #box {
      position: relative;
      background-color: black;
    }
    #content {
      padding: 10px;
    }
    #close {
      float: right;
    }
    #actions {
      text-align: right;
    }
    uproxy-button#done {
      background-color: #222;
    }

    /* styling for any bubble with error class */
    :host(.error) {
      opacity: 1;
    }
    :host(.error) #box {
      background: firebrick;
    }
    :host(.error) #arrow {
      border-bottom-color: firebrick;
    }
    :host(.error) #done {
      background: #CC2727;
    }
    </style>

    <div id='container'>
      <div id='arrow'></div>

      <div id='box'>
        <div id='content'>
          <paper-icon-button id='close' icon='clear' role='button' on-tap='{{ close }}' hidden?='{{ noclear }}'></paper-icon-button>

          <content></content>

          <div id='actions'>
            <uproxy-button id='done' on-tap='{{ close }}'>{{ "DONE" | $$(model.globalSettings.language) }}</uproxy-button>
          </div>
        </div>
      </div>
    </div>

  </template>

  <script src='bubble.js'></script>
</polymer-element>
